import React, { PureComponent } from 'react';

import { CheckCircleOutlined, InboxOutlined } from '@ant-design/icons';

import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';

import { message, Steps, Button, Upload } from 'antd';
import { requestHeadersMd5 } from '@/utils/utils';

const { Step } = Steps;
const { Dragger } = Upload;

const steps = [
  {
    title: '下载模板',
    content: 'First-content',
  },
  {
    title: '上传新增数据',
    content: 'Second-content',
  },
  {
    title: '完成',
    content: 'Last-content',
  },
];

class CardAdd extends PureComponent {
  state = {
    uploadUrl: '/esApi/insCardHdl/uploadExcelAdd',
    current: 0,
  };

  goCon = () => {
    this.setState({
      current: 0,
    });
  };

  downTemplate = () => {
    const { downTemplate } = this.props;
    downTemplate();
  };

  done = () => {};

  // 文件限制大小
  beforeUpload = info => {
    const isLt5M = info.size / 1024 / 1024 < 5; // 文件限制5M
    if (!isLt5M) {
      message.error('上传失败，文件大小不允许超过5M');
    }
    return isLt5M;
  };

  // 文件上传
  changeUpload = info => {
    const { file, fileList } = info;

    if (file.status === 'done' && file.response.success) {
      message.success('文件上传成功！');
    } else {
      return fileList;
    }
    if (file.status === 'error') {
      message.error('上传失败！');
    }
    return true;
  };

  prev() {
    const { current: current1 } = this.state;
    const current = current1 - 1;
    this.setState({ current });
  }

  next() {
    const { current: current1 } = this.state;
    const current = current1 + 1;
    this.setState({ current });
  }

  render() {
    const { current, uploadUrl, errorCount } = this.state;

    const props = {
      beforeUpload: info => this.beforeUpload(info),
      action: uploadUrl,
      headers: requestHeadersMd5(),
      onChange: info => this.changeUpload(info),
    };
    return (
      <div>
        <Steps current={current}>
          {steps.map(item => (
            <Step key={item.title} title={item.title} />
          ))}
        </Steps>
        <div className="steps-action" style={{ textAlign: 'center' }}>
          {current === 0 && (
            <div style={{ marginTop: 300 }}>
              <Button size="large" type="primary" onClick={() => this.downTemplate()}>
                下载
              </Button>
              <Button style={{ marginLeft: 30 }} size="large" onClick={() => this.next()}>
                下一步
              </Button>
            </div>
          )}
          {current === 1 && (
            <div style={{ marginTop: 20 }}>
              <div>
                <div
                  style={{
                    width: 500,
                    height: 230,
                    textAlign: 'center',
                    display: 'inline-block',
                    marginTop: 40,
                    marginBottom: 40,
                  }}
                >
                  <Dragger {...props}>
                    <p className="ant-upload-drag-icon">
                      <InboxOutlined />
                    </p>
                    <p className="ant-upload-text">点击或将文件拖到这里上传</p>
                  </Dragger>
                </div>
              </div>
              <Button size="large" type="primary" onClick={() => this.prev()}>
                上一步
              </Button>
              <Button style={{ marginLeft: 30 }} size="large" onClick={() => this.next()}>
                下一步
              </Button>
            </div>
          )}
          {current === 2 && (
            <div style={{ marginTop: 20 }}>
              <div>
                <div style={{ marginTop: 20, marginBottom: 10 }}>
                  <CheckCircleOutlined style={{ color: '#52C41A', fontSize: 80 }} />
                </div>
                <div style={{ fontSize: 20, fontWeight: 'bold', marginBottom: 20 }}>操作成功</div>
                <div
                  style={{
                    width: '70%',
                    margin: '0 auto',
                    height: 'auto',
                    paddingTop: 20,
                    paddingBottom: 15,
                    background: '#FAFAFA',
                    paddingLeft: 30,
                    textAlign: 'left',
                  }}
                >
                  <div style={{ marginBottom: 20 }}>
                    <span style={{ marginRight: 40 }}>导入数据:</span>
                  </div>
                  <div style={{ marginBottom: 20 }}>
                    <span style={{ marginRight: 40 }}>成功数据:</span>
                  </div>
                  <div style={{ marginBottom: 20 }}>
                    <span style={{ marginRight: 40 }}>失败数据:</span>
                    <span>{errorCount}</span>
                  </div>
                </div>
                <div style={{ marginTop: 20 }}>
                  <Button size="large" type="primary" onClick={() => this.goCon()}>
                    继续操作
                  </Button>
                  <Button style={{ marginLeft: 30 }} size="large" onClick={() => this.done()}>
                    完成
                  </Button>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    );
  }
}
const CardAddform = Form.create()(CardAdd);
export default CardAddform;
